<template>
  <div class="login-container">
      <div class="login-box">
        <div class="box-trans">
          <!-- logo -->
          <img src="./logo_index.png"/>
            <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
          <el-form-item prop="mobile">
            <el-input v-model="loginForm.mobile" placeholder="请输入手机号码">
              <i slot="prefix" class="iconfont icon-mobile"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-input v-model="loginForm.code" placeholder="请输入验证码">
              <i slot="prefix" class="iconfont icon-yanzhengma"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="xieyi">
            <el-checkbox v-model="loginForm.xieyi"></el-checkbox>
            <span>我已阅读并同意用户协议和隐私条款</span>
          </el-form-item>
          <el-form-item>
               <el-button type="primary" v-loading="btnLoading"  style="width:100%" @click="login">登录</el-button>
            </el-form-item>
        </el-form>
        </div>

      </div>
  </div>
</template>

<script>
import '@/assets/js/gt.js'
import '@/assets/font/iconfont.css'
export default {
  data () {
    // 自定义校验规则
    var checkMobile = function (rule, value, callback) {
      var reg = /^1[356789]\d{9}$/
      if (!reg.test(value)) {
        callback(new Error('手机号码格式不正确'))
      } else {
        callback()
      }
    }
    var checkXieyi = function (rule, value, callback) {
      if (Number(value) === 0) {
        callback(new Error('请勾选协议'))
      } else {
        callback()
      }
    }
    return {
      captureObj: null, // 保存人机交互窗口对象
      btnLoading: false, // 按钮等待效果
      loginForm: {
        mobile: '',
        code: '',
        xieyi: false
      },
      loginFormRules: {
        mobile: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          // 自定义校验规则
          { validator: checkMobile, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
        xieyi: [
          { validator: checkXieyi }
        ]
      }
    }
  },
  methods: {
    // 登录方法
    login () {
      // 判断以前是否生成过人机窗口:生成过就直接显示
      if (this.captchaObj) {
        return this.captchaObj.verify()
      }
      // 点击登陆的时候也要对表单进行整体校验
      // el-form自带的valid特方法
      // this.$router.push({
      //   path: '/'
      // })
      this.btnLoading = true
      this.$http.get(`/captchas/${this.loginForm.mobile}`).then(res => {
        const { data } = res.data
        // 请检测data的数据结构， 保证data.gt, data.challenge, data.success有值
        window.initGeetest({
          // 以下配置参数来自服务端 SDK
          gt: data.gt,
          challenge: data.challenge,
          offline: !data.success,
          new_captcha: true,
          product: 'bind' // 隐藏"人机按钮"
        }, captchaObj => {
          // 这里可以调用验证实例 captchaObj 的实例方法
          captchaObj.onReady(() => {
            // 保存人机窗口对象
            this.captchaObj = captchaObj
            // 验证码ready之后才能调用verify方法“显示验证码”
            captchaObj.verify() // 显示验证码
            this.btnLoading = false
          }).onSuccess(() => {
            // 人机验证成功
            // 验证账号登录系统
            this.loginAct()
          }).onError(() => {
            // 人机验证失败
          })
        })
      }).catch(err => {
        console.log(err)
        this.$message.error('获得人机验证码失败')
      })
    },
    // 真正的登录动作
    loginAct () {
      this.$refs.loginFormRef.validate(valid => {
        if (valid) {
          this.$http.post('/authorizations', this.loginForm).then(res => {
            console.log(res)
            if (res.status == 201) {
              window.sessionStorage.setItem('name', res.data.data.name)
              window.sessionStorage.setItem('photo', res.data.data.photo)
              window.sessionStorage.setItem('token', res.data.data.token)
              this.$router.push({
                name: 'home'
              })
            }
          }).catch(err => {
            console.log(err)
            this.$message.error('用户名或验证码错误')
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login-container{
  display: flex;
  justify-content: center;
  align-items: center;
  background:url(./login_bg.jpg);
  background-size:cover;
  height:100%;
  .login-box{
    display: flex;
    justify-content: center;
    width:410px;
    height:345px;
    background: #fff;
    .el-form{
      width:100%;
    }
  }
  .box-trans{
    text-align: center;
    img{
      width:60%;
      display: inline-block;
      margin:20px 0;
    }
  }
}
</style>>
